<template>
	<div id="PayOrder">
		<x-header :left-options="{backText: ''}" title="支付订单"></x-header>
		<!--商品-->
		<div class="order-goods-box">
			<div v-for="(item,index) in shop_list">
			<div class="order-goods" v-for="(item2,index2) in item.item_list">
				<img :src="item2.goods.goods_thumb" />
				<div class="order-goods-right">
					<div class="order-goods-info">
						<p class="good-name">{{item2.goods.goods_name}}</p>
						<p class="good-spec" v-if="item2.sku_spec">规格尺寸:如意平安 新籽9mm*7mm</p>
						<p class="good-spec" v-else>无</p>
					</div>
				</div>
				<p class="order-goods-num">
					<span class="order-goods-price">¥{{item2.goods_price}}</span>
					<span>x{{item2.goods_num}}</span></p>
			</div>
			</div>
		</div>
		<!--支付-->
		<div class="pay-box">
			<div class="countdown-box">
				<count-down  :currentTime="parseInt(cur_time)" :startTime="wxpay.pay_starttime" :endTime="wxpay.pay_starttime+(60*30)" :tipText="'支付剩余时间'" :tipTextEnd="'支付超时 '" :endText="'支付超时'"  :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''"></count-down>
				<!--<p class="countdown-time">支付剩余时间 {{common.timestampToTime()}}</p>-->
				<span class="pay-price">¥{{wxpay.pay_money/100}}</span>
				<p class="order-serial-number">订单编号：{{pay_sn}}</p>
			</div>
			<div class="pay-type">
				<div class="wx-pay pay-com">
					<i class="tp-icon wx-pay-logo"></i>
					<span>微信支付</span>
					<i class="tp-icon pay-choosed" v-show="!choosed" @click="choosed=!choosed"></i>
					<div class="no-choosed" v-show="choosed" @click="choosed=!choosed"></div>
				</div>
			</div> 
		</div>
		<button class="pay-btn" @click="payNow()">确认支付</button>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	import CountDown from 'vue2-countdown';
	
	export default {
		data() {
			return {
				choosed: false,
				pay_sn:'',
				shop_list:'',
				wxpay:'',
				cur_time:''
			}
		},
		components: {
			XHeader,
			CountDown
		},
		created() {

		},
		mounted() {
			this.getPaysn();
			this.getGoods();
		},
		methods: {
			//接受填写订单传来的pay_sn
			getPaysn: function() {
				this.pay_sn = this.$route.query.pay_sn;
				console.log(this.pay_sn);
			},
			//封装接口方法
			request_get:function(url,success=function(res){},error=function(err){}){
				this.$http({
					method:'GET',
					url:url
				}).then((result)=>{
					success(result);
				}).catch((err)=>{
					console.log(err);
					error(err);
				})
			},
			getGoods:function(){
				var _this = this;
				let params={
					pay_sn:this.pay_sn
				}
				this.$http({
					method:'POST',
					url:'/los/api/mall_member/pay_order.json',
					data:params
				}).then((res)=>{
					if(res.data.code==1){
						_this.shop_list=res.data.data.order_list;
						_this.wxpay=res.data.data.wxpay;
						_this.cur_time=res.data.time;
						
						console.log("////////");
						console.log(_this.shop_list);
					}
				}).catch((err)=>{
					console.log(err);

				})
			},
			//微信支付
			payNow: function() {
				var _this = this;
				this.getSign();
				_this.request_get('/los/api/wxpay/?pay_sn=' + _this.pay_sn, function(res) {
					res=res.data;
					_this.success = !_this.success;
					_this.msg = '等待支付';
					wx.chooseWXPay({
						timestamp: res.data.wxpay_jsapi_parameters.timeStamp,
						nonceStr: res.data.wxpay_jsapi_parameters.nonceStr,
						package: res.data.wxpay_jsapi_parameters.package,
						signType: res.data.wxpay_jsapi_parameters.signType,
						paySign: res.data.wxpay_jsapi_parameters.paySign,
						success: function(res) {
							
							alert("///"+res.errMsg);
							if(res.errMsg == "chooseWXPay:ok") {
								_this.request_get('/los/api/wxpay/res/?pay_sn=' + _this.pay_sn, function(res) {
									
									res=res.data;
									alert("///"+JSON.stringify(res)+"///");
									if(res.data.wxpay_res.result_code == "SUCCESS" && res.data.wxpay_res.return_code == "SUCCESS") {
										alert("支付成功");
										location.href = '#/PaySuccess/pay_sn/' + _this.pay_sn;
									}
								})
							} else {
								alert('支付失败');
							}
						},
						cancel: function(res) {
							_this.success = !_this.success;
							_this.msg = '取消支付';
						}
					});
				})
			},
			//微信支付获取时间戳
			getSign: function() {
				let pay_sn = this.$route.params.pay_sn;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				this.shareUrl = urls;
				var params = {
					url: this.shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: result.data.appId,// 必填，公众号的唯一标识
							timestamp: result.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: result.data.nonceStr,// 必填，生成签名的随机串
							signature: result.data.signature,// 必填，签名
							jsApiList: result.data.jsApiList,// 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
						});
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
		}
	}
</script>

<style type="text/css" scoped="scoped">
	#PayOrder {
		background: #FFFFFF;
		height: 100%;
	}
	/*商品*/
	
	.order-goods-box {
		background: #F5F5F5;
		padding: 0.26rem 0.4rem;
	}
	
	.order-goods-box .order-goods {
		background: #FFFFFF;
		font-size: 0;
		display: flex;
		align-items: center;
		margin-bottom: 0.26rem;
	}
	
	.order-goods-box .order-goods .order-goods-num {
		font-size: 0.37rem;
		color: #222222;
		margin-right: 0.26rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.order-goods-box .order-goods img {
		width: 1.81rem;
		height: 1.81rem;
		border-radius: 0.13rem 0px 0px 0.13rem;
		margin-right: 0.21rem;
	}
	
	.order-goods-box .order-goods .order-goods-right {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}
	/*商品信息*/
	
	.order-goods-right .order-goods-info {}
	
	.order-goods-right .order-goods-info .good-name {
		font-size: 0.37rem;
		color: #222222;
		margin-bottom: 0.34rem;
		width: 5.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.order-goods-right .order-goods-info .good-spec {
		font-size: 0.32rem;
		color: #999999;
		width: 5.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/*支付*/
	
	.pay-box {
		/*height: 100%;*/
		background: #FFFFFF;
	}
	
	.pay-box .countdown-box {
		padding: 0.98rem 0 1.46rem 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.pay-box .countdown-box .countdown-time,
	.order-serial-number {
		font-size: 0.32rem;
		color: #999999;
	}
	
	.pay-box .countdown-box .pay-price {
		font-size: 1.06rem;
		color: #222222;
		margin: 0.46rem 0;
	}
	
	.pay-box .pay-type {
		padding: 0.26rem 0.4rem;
	}
	
	.pay-box .pay-com {
		display: flex;
		align-items: center;
	}
	
	.pay-box .pay-com .no-choosed {
		border: 1px solid #E6E6E6;
		width: 0.58rem;
		height: 0.58rem;
		border-radius: 50%;
	}
	
	.pay-box .pay-com i:first-child {
		width: 0.61rem;
		height: 0.53rem;
	}
	
	.pay-box .pay-com .pay-choosed {
		width: 0.58rem;
		height: 0.58rem;
	}
	
	.pay-box .pay-com span {
		font-size: 0.42rem;
		color: #222222;
		flex: 1;
		margin-left: 0.26rem;
	}
	
	.weui-icon-success:before {
		color: #DD2839;
	}
	/*支付按钮*/
	
	#PayOrder .pay-btn {
		width: 92%;
		background: linear-gradient(90deg, rgba(221, 40, 53, 1) 0%, rgba(221, 40, 87, 1) 100%);
		border-radius: 0.6rem;
		height: 1.2rem;
		line-height: 1.2rem;
		font-size: 0.4rem;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 0.4rem;
		left: 4%;
		outline: none;
	}
	/*count*/
	.count-down div{
		display: flex;
	}
	.count-down .starttxt,.tiptxt{
		font-size: 0.32rem !important;
		color: #999999;
	}
	.count-down div .hour ,
	.count-down div .minute ,
	.count-down div .seconds ,
	span,i{
		color: #999999;
		font-size: 0.32rem;
	}
	.count-down div .hour ,
	.count-down div .minute ,
	.count-down div .seconds {
		font-size: 0;
	}
	
</style>

<style type="text/css">
	.vux-header {
		background-color: #FFFFFF !important;
	}
	
	.vux-header .vux-header-title>span {
		color: #222222;
	}
	
	.vux-header .vux-header-left .left-arrow:before {
		border: #222222;
	}
</style>